<template>
  <div>
    <ul>
      <li v-for="(value, key) in person" :key="key">{{ key }} {{ value }}</li>
    </ul>
    <button @click="update">update</button>
    <ul>
      <li v-for="(person, index) in persons" :key="index">
        {{ person.name }} {{ person.age }}
      </li>
    </ul>
    <button @click="update111">update111</button>
  </div>
</template>

<script>
import Vue from "vue";

export default {
  name: "App",
  data() {
    return {
      person: {
        name: "静哥",
        age: 60,
      },
      persons: [{ name: "静哥", age: 60 }],
    };
  },
  methods: {
    update() {
      /*
        响应式：更新数据，数据变，用户界面也变
        data中原有所有属性都是响应式的，新添加的属性不是
        对象想要新增响应式数据：Vue.set
        数组想要新增响应式数据：push。。
      */
      // this.person.age++;
      // this.person = {
      //   sex: "男",
      // };
      // this.person.sex = "男";
      // 将数据定义成响应式数据的方法
      // Vue.set(this.person, "sex", "男");
      this.$set(this.person, "sex", "男");
    },
    update111() {
      // this.persons[1] = { name: "陶哥", age: 33 };
      // 变更方法
      // Vue对数组的方法进行重新定义，定义成响应式的
      // https://cn.vuejs.org/v2/guide/list.html#%E6%95%B0%E7%BB%84%E6%9B%B4%E6%96%B0%E6%A3%80%E6%B5%8B
      // this.persons.push({ name: "陶哥", age: 33 })
      // this.persons[0].age++;
      // this.persons[0].sex = "男";
    },
  },
};
</script>

<style></style>
